import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';
import Img from '../../components/Img/Img';

import { index_banner } from './HomeCarouselBlock.less';

export default class HomeCarouselBlock extends Component {
  constructor(props) {
    super(props)
    this.state = {
      num: 0
    };
    this.timer = null;
  }

  componentDidMount() {
    // simulate img loading
    this.timer = setTimeout(() => {
      // console.log(1);
      this.setState({
        num: this.state.num + 1
      });
    }, 3000);
  }

  componentWillUnmount() {
    // console.log(1);
    if (this.timer != null) {
      clearTimeout(this.timer);
    }
  }

  render() {
    const { data } = this.props;
    // console.log(data);
    return (
      <Carousel
        //key={this.state.num}
        className={index_banner}
        selectedIndex={this.state.num}
        //autoplay={data.length != 1}
        autoplay={false}
        infinite
        dots
      // resetAutoplay={true}
      >
        {
          data.map((item, index) => (
            <div key={`carousel-${index}`}>
              <a href={item.advUrl}>
                <Img
                  load={
                    () => {
                      window.dispatchEvent(new Event('resize'));
                    }
                  }
                  src={item.imgUrl}
                />
              </a>
            </div>
          ))
        }
      </Carousel>
    );
  }
}

